<!--
 * @Descripttion: 
 * @version: 1.0
 * @Author: Teemor
 * @Date: 2024-11-14 13:54:57
 * @LastEditors: 圆月豌豆 232957726@qq.com
 * @LastEditTime: 2025-11-28 11:11:11
-->
<template>
  <div style="width: 100vw; height: 100vh">
    <TresCanva v-if="config" isPreview @click="clickHtml" />
  </div>
  <el-button v-if="isTransition" type="primary" class="fixed right-10 top-10" @click="returnOriginalScene">返回原场景</el-button>
  <el-dialog width="500" title="发送命令" destroy-on-close :close-on-click-modal="false" v-model="outputDialogFlag">
    <OutputDialog :outputPen="outputPen" :id="id" @close="outputDialogFlag = false" />
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, onMounted, ref } from 'vue'
import { defineAsyncComponent } from 'vue'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import { JSONStringify, JSONParse } from '@/utils'
import { modelGet } from 'swagger-api/export-api/scada-config'
import { useRoute } from 'vue-router'
const OutputDialog = defineAsyncComponent(() => import('@/components/OutputDialog/index.vue'))

const outputDialogFlag = ref(false)
const chartEditStore = useChartEditStore()
const TresCanva = defineAsyncComponent(() => import('@/components/TresCanva/index.vue'))
const routerParamsInfo = useRoute()
const config = ref(undefined)
const getData = async () => {
  const loadingInstance1 = ElLoading.service({ fullscreen: true })
  try {
    const { id } = routerParamsInfo.params
    const [f] = id
    if (f.indexOf('id_') == 0) return
    const res = await modelGet(f)
    if (res.code == 0) {
      chartEditStore.clearComponentList()
      config.value = JSONParse(res.data.config)
      console.log(config.value, '接口获取的配置')
      chartEditStore.setinitData(config.value)
    }
  } catch {
  } finally {
    loadingInstance1.close()
  }
}
const outputPen = ref({})
const id = ref()
const isTransition = ref(false)
const clickHtml = async(e: any) => {
  const { item } = e
  const { thoroughfare = {} } = item || {}
  const { OutPutDefaultIds = [] } = thoroughfare
  if (OutPutDefaultIds.length) {
    const [f] = OutPutDefaultIds
    for(let i in f){
      outputPen.value = f[i]
      id.value = i
    }
    outputDialogFlag.value = true
    return
  }
  const {events={}} = item
  if (events.transitionId && !isTransition.value) {
    //如果有transitionId 说明是转场事件，切换模型到转场模型
    ElMessageBox.confirm(
    `是否切换到转场模型${events.transitionName}?`,
    '转场确认',
    {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'warning',
    }
  )
    .then(async() => {
       const loadingInstance1 = ElLoading.service({ fullscreen: true })
        try {
          const res = await modelGet(events.transitionId)
          if (res.code == 0) {
            // 记录初始化
            chartEditStore.clearComponentList()
            const json = JSONParse(res.data.config)
            chartEditStore.setinitData(json)
            isTransition.value = true
          }
        } catch {
        } finally {
          loadingInstance1.close()
        }
        return
    })
    .catch(() => {
      
    })
  }
}
const returnOriginalScene = () => {
  if (!isTransition.value) return
  ElMessageBox.confirm(
    '是否返回原场景?',
    '返回确认',
    {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'warning',
    }
  )
  .then(async() => {
    getData()
    isTransition.value = false
  })
  .catch(() => {})
}
onMounted(() => {
  getData()
})
</script>
